<template>
  <div style="margin-bottom: 32px">
    <el-tooltip class="item" effect="dark" content="刷新" placement="top" >
      <el-button size="mini" circle icon="el-icon-refresh" @click="initData()" />
    </el-tooltip>
    <el-table style="margin: 10px 0" :data="notFindRouteList">
      <el-table-column label="序号" type="index" width="55" align="center" />
      <el-table-column
        align="center"
        label="能力编码"
        prop="serviceCode"
        :show-overflow-tooltip="true"

        min-width="100"
      />
    </el-table>
  </div>
</template>

<script>
import {searchUnloadedServiceList} from "@slc/api/slc/inventory";

export default {
  components: {
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      notFindRouteList: [],
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.initData();
        }
      },
      immediate: true,
    },
  },
  computed: {
  },
  methods: {
    async initData() {
      this.notFindRouteList = [];
      const res = await searchUnloadedServiceList();
      const data = res.data.map((item) => ({ serviceCode: item }));
      this.notFindRouteList = data;
    }
  },
};
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 0px;
}
</style>
